<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<script src="../assets/flexible/flexible.debug.js"></script>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="email=no">
	<title>商品详情</title>
	<link rel="stylesheet" href="../css/reset.css">
	<link rel="stylesheet" href="../assets/iconfont/iconfont.css">
	<link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">
	<link rel="stylesheet" href="../css/details.css">
</head>

<body>

	<!-- 头部 -->
	<header class="header">
		<a href="../index.html" class="iconfont icon-fanhui left"></a>
		<a href="#" class="iconfont icon-gouwuchekong right"></a>
	</header>
	<!-- banner -->
	<div class="goods">
		<div class="swiper-container">
			<div class="swiper-wrapper wrapper">
				<div class="swiper-slide">
					<img src="https://wap.ghs.net/public/images/3b/cf/6f/3f98ab4154fbed240411ddf2a0fb193b7ef9e9f0.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="https://wap.ghs.net/public/images/6e/13/16/5fc72a9d63db065d44abf69ada1250f334628545.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="https://wap.ghs.net/public/images/84/9b/68/b676d5bf89dc5f8770f5e622705509a6a4004af0.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="https://wap.ghs.net/public/images/d5/af/c4/e75b3d3dc62d3c54b0ebca7dc4633e0ce8d9141d.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="https://wap.ghs.net/public/images/3f/be/94/07accc5aed0ba62b214eafd61a34a4ac5fd7ace6.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="https://wap.ghs.net/public/images/03/94/3b/a6d687612ac2ec0bf37ca282e81d1d428991a698.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="https://wap.ghs.net/public/images/ae/9d/bc/4ff0b2f69f8b69bf5063aed37da089a54101ce11.jpg" />
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
		<h3>QueensMate智能营养破壁料理机</h3>
		<p class="price">￥1242.00</p>
		<p class="phone">
			<span class="left"><i class="icontfont icon-shouji"></i>活动价</span>
			<s>¥1380.00</s>
		</p>
		<section class="address">
			送至 <i class="iconfont icon-place"></i>北京
			<span>缺货</span>
		</section>
	</div>
	<!-- 货源 -->
	<ul class="delivery">
		<li>聚鲨商城发货</li>
		<li>货到付款</li>
		<li>正品保障</li>
	</ul>
	<!-- 活动促销 -->
	<section class="instruc">
		促销：<a>特惠活动</a>
	</section>
	<!-- 新品上市 -->
	<section class="colors">
		<h3>颜色选择</h3>
		<section class="bottom">
			<section class="red">红色</section>
			<section class="beige">红色</section>
		</section>
	</section>
	<!-- 商品详细信息 -->
	<section class="product">
		<h2>商品详情</h2>
		<img src="https://pic.ghs.net/public/images/20170814/1502693321284566.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693323622343.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321322677.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321820281.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321435150.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321214557.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321682448.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321388653.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321313427.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321549848.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321583868.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321236959.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321156513.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321265923.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321852561.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321446017.jpg">
		<img src="https://pic.ghs.net/public/images/20170814/1502693321149270.jpg">
	</section>
	<!-- 底部导航 -->
	<footer class="footer">
		<section class="left">
			<dl>
				<dd>
					<a class="iconfont icon-kefu"></a>
				</dd>
				<dd>
					客服
				</dd>
			</dl>
		</section>
		<section class="center">加入购物车</section>
		<section class="right">立即购买</section>
	</footer>

	<script src="../assets/jquery/jquery-3.2.1.min.js"></script>
	<script src="../assets/iconfont/iconfont.js"></script>
	<script src="../assets/swiper/js/swiper.jquery.min.js"></script>
	<script src="../js/details.js"></script>
	<script>
		var mySwiper = new Swiper('.swiper-container', {
			// direction: 'vertical',
			loop: true,
			// 如果需要分页器
			pagination: '.swiper-pagination',
			// 如果需要前进后退按钮
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev',
			// 如果需要滚动条
			// scrollbar: '.swiper-scrollbar',
		})

	
	</script>
</body>

</html>